<template>
  <van-tabbar v-model="active" route fixed>
    <van-tabbar-item v-for="item in tabbars" :to="item.to" :icon="item.icon" :key="item.to">
      {{item.title}}
    </van-tabbar-item>
  </van-tabbar>
</template>

// 该setup功能是新的组件选项。它是组件内部暴露出所有的属性和方法的统一API
// 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
// 在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了
// setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。 如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API
<script setup lang="ts">
// 在setup语法糖中引入组件不需要注册声明就可以直接用了
 import { onMounted,computed, PropType } from "vue"
 export interface ITabBar {
   title:string //标题
   to:string //url路径
   icon: string //图标
 }

//defineProps接受父类传递的参数
 const props = defineProps({
   active:Number,
   tabbars:{
    type: Array as PropType<ITabBar[]>,
    default: () =>[]
   }
 })
 //子组件派发事件给父组件,并且子组件修改active的值,父组件即时响应
 const emit = defineEmits(['change','update:active'])
 //计算属性active
 const active = computed({
   get:() => props.active,
   set:(val)=>{
     emit("change",val);
     emit("update:active",val)
   }
 })

 // 在 setup 中你应该避免使用 this，因为它不会找到组件实例。
 // setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法>在 setup 中被获取
 onMounted(() => {
    console.log(props.tabbars);
  })

  

</script>

